{% extends 'base.html' %}
{% block title %}模块{% endblock %}
{% block content %}
    <div class="span9" id="content">
        <div class="block">
            <div class="navbar navbar-inner block-header">
                <div class="muted pull-left">模块</div>
            </div>
            <h4>{{ msg }}</h4>
            {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                        <p {% if message.tags %} class="{{ message.tags }}"{% endif %} style="color:red">{{ message }}</p>
                    {% endfor %}
                </div>
            {% endif %}
            <div class="block-content collapse in">
                <div class="span12">
                    <div class="table-toolbar">
                        <div class="btn-group">
                            <button onclick="addmodel()" class="btn btn-success" >添加</button>
                            {#                                <input class="btn btn-success"  type="button" value="添加">#}
                        </div>
                    </div>
                    <div id="example2_wrapper" class="dataTables_wrapper form-inline" role="grid">
                        <div class="row">
                            <div class="span6">
                            </div>
                        </div>
                        <table cellpadding="0" cellspacing="0" border="0" class="table table-hover" id="example2" aria-describedby="example2_info">
                            <thead>
                            <tr role="row">
                                <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 168px;">模块</th>
                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 233px;">创建者</th>
                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 233px;">创建时间</th>
                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 214px;">操作</th>
                            </thead>
                            <tbody role="alert" aria-live="polite" aria-relevant="all">
                            {% for model in models %}
                                <tr class="gradeA odd" id="{{ model.id }}">
                                    <td class=" sorting_1">{{ model.name }}</td>
                                    <td class=" ">{{ model.makeuser }}</td>
                                    <td>{{ model.makedate }}</td>
                                    <td class=" ">
                                        <button class="btn btn-primary " onclick="editmodel({{ model.id }})">
                                            <i class="icon-pencil icon-white"></i>
                                                编辑</button>
                                        <button class="btn btn-danger " onclick="deletemodel({{ model.id }})">
                                            <i class="icon-remove icon-white">
                                            </i> 删除
                                        </button>
                                    </td>
                                                                    <div style="display:none;z-index: 210;width: 500px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);box-shadow: 0 0 10px rgba(0,0,0,0.6);border: solid 1px #255c71;border-radius: 5px 5px 0 0;background-color: lightgray"  id="model-{{ model.id }}">
                                            <div style="height: 5px;">编辑模块</div>
                                            <div style="background-color: whitesmoke;margin-top: 24px" >
                                                <p>
                                                    <span>模块名字：</span>
                                                    <input id="name-{{ model.id }}" placeholder="请输入要编辑的模块名称">
                                                </p>
                                            </div>
                                            <div style="margin-bottom: auto">
                                                <input value="编辑" type="button" class="btn-default"  onclick="editmodelnow({{ model.id }})" >
                                                <input value="取消" type="button" class=" btn-default"  onclick="guanbieditmodel({{ model.id }})" >
                                            </div>
                                        </div>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display:none;z-index: 210;width: 500px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);box-shadow: 0 0 10px rgba(0,0,0,0.6);border: solid 1px #255c71;border-radius: 5px 5px 0 0;background-color: lightgray"  id="addmodel">
        <div style="height: 5px;">添加模块</div>
        <div style="background-color: whitesmoke;margin-top: 24px" >
            <p>
                <span>模块名字：</span>
                <input id="model" placeholder="请输入要添加的模块名称">
            </p>
        </div>
        <div style="margin-bottom: auto">
            <input value="添加" type="button" class="btn-default"  onclick="tianjia()" >
            <input value="取消" type="button" class=" btn-default"  onclick="guanbi()" >
        </div>
    </div>
{% endblock %}
{% block js %}
    function deletemodel(id) {
    $.ajax({
    url:'{% url 'model' %}',
    type:'DELETE',
    data:id,
    contentType: 'application/json; charset=UTF-8',
    processData:false,
    success:function(data){
    if(data['code']!=2){
    alert(data['data'])
    }else{
    alert(data['data']);
    caseid=document.getElementById(id);
    caseid.hidden=true;
    }
    }
    })
    };
    function addmodel(){
    m=document.getElementById('addmodel');
    m.style.display=''
    };
    function guanbi(){
    m=document.getElementById('addmodel');
    m.style.display='none'
    };
    function tianjia(){
    var model=document.getElementById('model').value;
    $.ajax({
    url: '{%  url 'model' %}',
    type: 'POST',
    data: model,
    contentType: 'application/json; charset=UTF-8',
    processData: false,
    success: function (result) {
    if(result['code']==2){
    alert(result['data']);
    location.reload()
    }
    else{
    alert(result['data']);
    }
    }
    })
    };
    function editmodel(id){
    m=document.getElementById('model-'+id);
    m.style.display=''
    };
    function guanbieditmodel(id){
    m=document.getElementById('model-'+id);
    m.style.display='none'
    };
    function editmodelnow(id){
    var name=document.getElementById('name-'+id).value;
    var data={};
    data['id']=id;
    data['name']=name;
    $.ajax({
    url: '{%  url 'model' %}',
    type: 'PUT',
    data: JSON.stringify(data),
    contentType: 'application/json; charset=UTF-8',
    processData: false,
    success: function (result) {
    if(result['code']==2){
    alert(result['data']);
    location.reload()
    }
    else{
    alert(result['data']);
    }
    }
    }
    )
    }
{% endblock %}